<template>
    <!--  -->
    <swiper class="swiper-container" :style="{ width: width, height: height }" :slides-per-view="slidesPerView"
        :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange" :modules="modules"
        :pagination="{ clickable: true }" :autoplay="{
            delay: 2000,
            disableOnInteraction: false,
        }" :navigation="navigation" :loop="true" @mouseenter="pauseSwiper" @mouseleave="resumeSwiper">
        <swiper-slide v-for="(item, index) in list" :key="index">
            <img class="swiper-a-img" src="~/assets/images/img2.png" alt="">
            <div class="swiper-a-text">啊上课了电话交换机阿是登记卡拉萨的</div>
        </swiper-slide>
    </swiper>
    <!-- <div class="custom-navigation">
        <img src="~/assets/images/img2.png" class="custom-swiper-button-prev" @click="goPrev">
        <img src="~/assets/images/img2.png" class="custom-swiper-button-next" @click="goNext">
    </div> -->
</template>
<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
/* */
const emit = defineEmits(['goChange']);
/* */
const props = defineProps({
    spaceBetween: {
        type: Number,
        default: 30,
    },
    //宽度
    list: {
        type: Array,
        default: () => [],
    },
    //宽度
    width: {
        type: String,
        default: '100%',
    },
    //高度
    height: {
        type: String,
        default: '100%',
    },
    //显示数量
    slidesPerView: {
        type: Number,
        default: 1,
    },
    // 底部红点
    pagination: {
        type: Boolean,
        default: true,
    },
    // 属性开启了 Swiper 的导航按钮，通常会显示左右箭头或其他导航元素
    navigation: {
        type: Boolean,
        default: true,
    },
    //是否循环播放
    loop: {
        type: Boolean,
        default: true,
    },
    //是否自动播放
    autoplay: {
        type: Boolean,
        default: true,
    },
    /*
     * 自动播放
     * delay: 延迟时间
     * stopOnLastSlide: 是否自动播放最后一张图片
     * disableOnInteraction: 是否在用户操作后停止自动播放
     *
     */
    // autoplay: {
    //     type: Object,
    //     default: () => ({
    //         delay: 2500,
    //         disableOnInteraction: false,
    //     })
    // }
})
const modules = [Navigation, A11y];
if (props.pagination) {
    modules.push(Pagination)
}
if (props.autoplay) {
    modules.push(Autoplay)
}
const swiperInstance = ref(null);
const onSwiper = (swiper) => {
    swiperInstance.value = swiper;
};
const onSlideChange = () => {
    console.log(swiperInstance.value?.activeIndex);
    emit('goChange', swiperInstance.value?.activeIndex);
    console.log('slide change');
};

const pauseSwiper = () => {
    if (swiperInstance.value) {
        swiperInstance.value.autoplay.stop();
    }
};
const resumeSwiper = () => {
    if (swiperInstance.value) {
        swiperInstance.value.autoplay.start();
    }
};
const goPrev = () => {
    if (swiperInstance.value) {
        swiperInstance.value.slidePrev();
    }
};
const goNext = () => {
    if (swiperInstance.value) {
        swiperInstance.value.slideNext();
    }
};

const slideTo = (index) => {
    if (swiperInstance.value) {
        swiperInstance.value.slideTo(index);
    }
}
/**/
defineExpose({
    slideTo,
});
</script>

<style scoped>
.swiper-container {
    background-color: white;
}

.item {
    width: 100%;
    height: auto;
}

.custom-swiper-button-prev,
.custom-swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #FFFFFF;
    font-size: 20px;
    width: 50px;
    height: 50px;
}

.custom-swiper-button-next {
    right: 20px;
}

.custom-swiper-button-prev {
    left: 20px;
}

.swiper-a-img {
    width: 100%;
    height: 100%;
}

.swiper-a-text {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    height: 45px;
    line-height: 45px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 18px;
    color: #FFFFFF;
}
</style>